<template lang="pug">
el-select.dashboard-select(
  v-model="selectedValue"
  :empty-values="[null, undefined]"
  popper-class="dashboard-select-poper"
  v-bind="$attrs"
)
  el-option(
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  )
</template>

<script setup name="DashboardSelect">
const props = defineProps({
  value: [Number, String],
  options: {
    type: Array,
    default: () => {
      return []
    }
  }
});
const emit = defineEmits();

const selectedValue = computed({
  get() {
    return props.value
  },
  set(val){
    emit('update:value', val)
  }
})
</script>
<style lang="scss">
.dashboard-select {
  .el-input__wrapper {
    background: transparent;
    border: 2px solid #049E91;
    color: #ffffff;
    box-shadow: none;
  }
  .el-input__inner {
    height: 40px;
    line-height: 36px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
  }
  &:hover:not(.el-select--disabled) .el-input__wrapper {
    box-shadow: none;
  }
  &-poper {
    background: linear-gradient( 238deg, #00231D 0%, #0E3539 7%, #0F3B3B 100%);
    border: none !important;
    border-radius: 0px;
    .el-popper__arrow {
      display: none;
    }
    .el-select-dropdown__wrap {
      padding: 6px 48px;
    }
    .el-select-dropdown__list {
      border-radius: 0px;
      // background: rgba(14, 22, 33, 0.60);
    }
    .el-select-dropdown__item {
      color: #D2D0D0;
      font-size: 16px;
      font-weight: 700;
      height: 40px;
      line-height: 40px;
      text-align: center;
      &:not(:first-of-type) {
        margin-top: 14px;
      }
      &.select, &.hover, &:hover {
        background: url('../../assets/images/common/dashboard_select.png')
          center center no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
      }
    }
  }
}
</style>
